<template>
  <div class="p-16px">
    <el-card>
      <el-space wrap :size="16">
        <div class="flex items-center whitespace-nowrap">
          订单号：
          <el-input
            v-model="params.orderNo"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          设备编号：
          <el-input
            v-model="params.deviceCode"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          代理商名称：
          <el-input
            v-model="params.distributorInfoName"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          订单状态：
          <el-select
            v-model="params.orderStatus"
            placeholder="请选择"
            clearable
            style="width: 200px"
            multiple
          >
            <el-option label="待支付" value="1" />
            <el-option label="已关闭" value="2" />
            <el-option label="已支付" value="3" />
            <el-option label="已出货" value="4" />
            <el-option label="已完成" value="5" />
          </el-select>
        </div>
        <div class="flex items-center whitespace-nowrap">
          下单时间：
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDateChange"
          />
        </div>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="handleExport">导出</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="orderNo" label="订单编号" min-width="230" />
        <el-table-column prop="deviceCode" label="设备编号" min-width="180" />
        <el-table-column prop="submitTime" label="下单时间" min-width="180" />
        <el-table-column prop="goodsNames" label="商品名称" min-width="180">
          <template #default="scope">
            <el-tooltip :content="scope.row.goodsNames" placement="top">
              <span class="text-ellipsis">{{ scope.row.goodsNames }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="payAmount" label="订单金额" min-width="180" />
        <el-table-column
          prop="distributorInfoName"
          label="代理商"
          min-width="180"
        />
        <el-table-column
          prop="orderStatusDesc"
          label="订单状态"
          min-width="180"
        />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" @click="handleDetail(scope.row)">
              详情
            </el-button>
            <el-button type="danger" @click="handleRefund(scope.row)">
              退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:current-page="params.current"
          v-model:page-size="params.size"
          layout="prev, pager, next"
          background
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog title="订单详情" v-model="isShowDialog" style="width: 900px">
      <el-space :size="24" wrap>
        <div>订单号：{{ orderDetail.orderNo }}</div>
        <div>设备编号：{{ orderDetail.deviceCode }}</div>
        <div>代理商名称：{{ orderDetail.distributorInfoName }}</div>
        <div>出货货道：{{ orderDetail.roadUnitCode }}</div>
        <div>下单时间：{{ orderDetail.submitTime }}</div>
        <div>订单状态：{{ orderDetail.orderStatusDesc }}</div>
        <div>支付方式：{{ orderDetail.payTypeDesc }}</div>
      </el-space>
      <el-table
        :data="orderDetail.orderGoodAdminVOList"
        style="width: 100%"
        class="mt-24px"
      >
        <el-table-column prop="goodsImageUrl" label="商品图片" min-width="180">
          <template #default="scope">
            <el-image
              :src="scope.row.goodsImageUrl"
              style="width: 80px; height: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" min-width="180" />
        <el-table-column prop="goodsPrice" label="商品价格" min-width="180" />
        <el-table-column prop="quantity" label="商品数量" min-width="180" />
        <el-table-column prop="realPrice" label="商品总价" min-width="180" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useCommonStoreHook } from "@/store/modules/common";
import dayjs from "dayjs";

const commonStore = useCommonStoreHook();
const params = ref({
  orderNo: "",
  deviceCode: "",
  distributorInfoName: "",
  orderNo: "",
  orderStatus: [],
  startTime: "",
  endTime: "",
  current: 1,
  size: 10,
});
const loading = ref(false);
const dateTime = ref([]);
const tableData = ref([]);
const orderDetail = ref({});
const isShowDialog = ref(false);
const total = ref(1000);

const handleExport = () => {
  console.log("导出");
};
const handleDetail = (row) => {
  orderDetail.value = row;
  isShowDialog.value = true;
};
const handleRefund = (row) => {
  console.log(row);
};
const handleSearch = () => {
  params.value.current = 1;
  fetchList();
};
const fetchList = () => {
  loading.value = true;
  commonStore
    .tradeOrderPage(params.value)
    .then((res) => {
      tableData.value = res.records.map((item) => ({
        ...item,
        submitTime: dayjs(item.submitTime).format("YYYY-MM-DD HH:mm:ss"),
        goodsNames: item.orderGoodAdminVOList
          .map((item) => item.goodsName)
          .join("、"),
      }));
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleCurrentChange = (current) => {
  params.value.current = current;
};
const handleDateChange = (value) => {
  if (value) {
    params.value.startTime = value[0];
    params.value.endTime = value[1];
  } else {
    params.value.startTime = "";
    params.value.endTime = "";
  }
};
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped></style>
